<template>

  <div class="wrapper">
    <swiper :options="swiperOption">
      <swiper-slide
        v-for="item of swiperList"
        :key="item.id">
        <img
          class="swiper-img"
          :src="item.imgUrl">
      </swiper-slide>
      <div class="swiper-pagination"
           slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
  export default {
    name: 'homeSwiper',
    props:{
      swiperList: Array
    },
    data() {
      return {
        // swiperList:[
        //   {
        //     id:'001',
        //     imgUrl:'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg'
        //   },
        //   {
        //     id:'002',
        //     imgUrl:'https://pic5.40017.cn/04/002/06/84/rBTJUl5TpEyADhLNAAFZaR4yZ24063_520x218_00.jpg'
        //   }
        // ],
        swiperOption: {
          pagination: '.swiper-pagination',
          loop: true,
          autoplay:5000
        }
      }
    }

  }
</script>


<style lang="stylus" scoped>
  .wrapper >>> .swiper-pagination-bullet
    background:#fff

  .swiper-img
    width: 100%

</style>
